<template>
<div class="home-contain">
<!--搜索框-->
  <van-search

    show-action
    background="#3296fa"
    placeholder="请输入搜索关键词"
    @search="onSearch"
    class="search"
    @focus="onSearch"
  >
    <template #action>
      <div @click="onSearch" type="button" class="search-btn">搜索</div>
    </template>
  </van-search>
<!--   tab列表-->
  <van-tabs  class="channel-tabss"  v-model="active"  swipeable >
    <van-tab  v-for="item in channels" :title="item.name" :key="item.id">

      <article-list  :channel="item"></article-list>
    </van-tab>


    <div slot="nav-right"  class="zhangwei"></div>
    <div slot="nav-right" class="hamberguer" @click="showEdit" >
      <i class="iconfont icon-gengduo"></i>
    </div>
  </van-tabs>

<!--  弹出层-->
  <van-popup
    v-model="channelsEditShow"
    closeable
    close-icon-position="top-left"
    position="bottom"
    :style="{ height: '100%' }"
    @close="closeEdit"
  >

<channel-edit :mychannels="channels"
              :active="active"
              @updata-active="updataActive"
              ref="changeEdit"

></channel-edit>

  </van-popup>
</div>
</template>

<script>
import  { getArticleList} from '@/api/user'
import  ArticleList  from './components/article-list'
import  ChannelEdit  from './components/channelEdit'
import {mapState} from  'vuex'
import { getItem} from "@/utils/storage";

export default {
  name: "index",
  data(){
    return{
        active:0,
      channels:[], //获取到的文章列表
      channelsEditShow:false,
    }
  },
  components:{
    ArticleList,
    ChannelEdit
  },
  computed:{
    ...mapState(['user'])
  },
  created() {
    this.getArticles()
  },
  methods:{
    //点击搜索
    onSearch(){

      this.$router.push('/search')
    },
//获取文章列表
   async getArticles(){

     try {
       let channelss=[]

       if (this.user){
//登录状态
        const { data }=await  getArticleList()
        channelss=data.data.channels
      }
      else {
//未登录
        const localChannels = getItem('CHANNELS')
        if (localChannels) {
          // 有本地频道数据，则使用
          channelss = localChannels
        } else {
          // 没有本地频道数据，则请求获取默认推荐的频道列表
          const { data }=await  getArticleList()
          channelss=data.data.channels
        }
      }
      this.channels=channelss
   }catch (err){
     console.log(err)
     this.$toast('获取文章数据失败')
   }
    },

  //  弹窗
    showEdit(){
      this.channelsEditShow=true
    },
//子组件调用本组件
    updataActive(index,remove){
      if (remove){
        this.active=index

      }else {
        this.active=index
        this.channelsEditShow=false
      }

    },
    //关闭弹窗时
    closeEdit(){

      this.$refs.changeEdit.isEdit=false

    }

  }
}
</script>

<style scoped lang="less">
.home-contain{
  margin-top: 190px;
}

//去除搜索按钮的点击效果
.van-search__action:active {
  background-color: transparent;
}
.home-contain{
  padding-bottom: 100px;

}
.van-search{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;

}
.search{
  .search-btn{
    color: white;

  }

}

//因为我们上面用的是scoped lang="less"，css效果只能作用本组件上，并不能影响根元素，所以我们要加上 /deep/

/deep/
.channel-tabss{

    .van-tab{
      min-width: 200px;
      font-size: 30px;
      border-right: 1px solid #edeff3 ;
      color: #777777;
    }
  .van-tab--active{//激活的选项卡文字

    color: #333333;
  }
  .van-tabs__wrap{
    position: fixed;
    z-index: 1;
    top:100px;
    left: 0;
    right: 0;
  }
  .van-tabs__nav{
    padding-bottom: 25px;
  }

  .van-tabs__line{//选中的那个选项的下线
    width: 60px !important;
    height: 6px;
    background-color: #00b4ff !important;
  }



}
.zhangwei{
      //  占位
      flex-shrink: 0; //表示不参与flex布局的计算，0为不参与，默认是1
      width: 70px;
      height: 82px;


    }





.hamberguer{
  position: fixed;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 82px;
  background-color: white;
  opacity: 0.9;

  .icon-gengduo{
    font-size: 33px;
  }
  //&表示父元素
  &:before{
    position: absolute;
    left: 0;
    content: "";
    width: 3px;
    height: 100%;
    background-image: url("~@/assets/gradient-gray-line.png");
    background-size: contain;

  }
}

</style>
